<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>智慧农业物联网管理系统</title>

        <!-- Vendor styles -->
        <link rel="stylesheet" href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css">
        <link rel="stylesheet" href="vendors/bower_components/animate.css/animate.min.css">
        <link rel="stylesheet" href="vendors/bower_components/jquery.scrollbar/jquery.scrollbar.css">
        <link rel="stylesheet" href="vendors/bower_components/fullcalendar/dist/fullcalendar.min.css">

        <!-- App styles -->
        <link rel="stylesheet" href="css/app.min.css">
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

        <style type="text/css">
        	*{
        		/*color: rgb(71,229,231);*/
        	}
        </style>
    </head>

     <body data-sa-theme="1">
        <main class="main" id='app'>
            <div class="page-loader">
                <div class="page-loader__spinner">
                    <svg viewBox="25 25 50 50">
                        <circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
                    </svg>
                </div>
            </div>
            <h1 id="top-title">智慧农业物联网管理系统2.0</h1>
            <header class="header">
                <div class="navigation-trigger hidden-xl-up" data-sa-action="aside-open" data-sa-target=".sidebar">
                    <i class="zmdi zmdi-menu"></i>
                </div>
                 
                <div class="logo hidden-sm-down">
                    <h1><a href="index.html" style=""> 智慧农业物联网管理系统2.0</a></h1>
                </div>

                <ul class="top-nav">
                    <!--1-->

                    <li class="hidden-xs-down">
                        <a href="index.html" class="top-nav__themes" data-sa-action="aside-open" data-sa-target=".themes"><i class="zmdi zmdi-palette"></i></a>
                    </li>
                </ul>

                <div class="clock hidden-md-down">
                    <div class="time">
                        <span class="time__hours"></span>
                        <span class="time__min"></span>
                        <span class="time__sec"></span>
                    </div>
                </div>
            </header>
             
                <aside class="sidebar">
                <div class="scrollbar-inner">
                     <div class="user">
                        <div class="user__info" data-toggle="dropdown">
                            <img class="user__img" src="demo/img/profile-pics/8.jpg" alt="">
                            <div>
                                <div class="user__name">{{userName}}</div>
                                <div class="user__email">{{userPhone}}</div>
                            </div>
                        </div>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="userXiugai.html">个人资料</a>
                            <a class="dropdown-item" href="../login/index.html">退出</a>
                        </div>
                    </div>
                    <!--菜单开始-->
                    <ul class="navigation" v-for="(value, key, index) in ment" >
                        <li class="@@indexactive"  v-if="!value.childMenu">
                        	<a :href="value.url">
                        		<i :class="value.icon"></i>{{value.name}}
                        	</a>
                        </li>
                        
                        <li class="navigation__sub @@typeactive" v-else>
                            <a :href="value.url">
                            	<i :class="value.icon"></i>{{value.name}}
                            </a>
                            <ul >
                                <li v-for="(value, key, index) in value.childMenu" class="@@navigation__active"><a :href="value.url">{{value.name}}</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </aside>
			

            <div class="themes">
    <div class="scrollbar-inner">
        <a href="data-table.html" class="themes__item active" data-sa-value="1"><img src="img/bg/1.jpg" alt=""></a>
        <a href="data-table.html" class="themes__item" data-sa-value="2"><img src="img/bg/2.jpg" alt=""></a>
        <a href="data-table.html" class="themes__item" data-sa-value="3"><img src="img/bg/3.jpg" alt=""></a>
        <a href="data-table.html" class="themes__item" data-sa-value="4"><img src="img/bg/4.jpg" alt=""></a>
        <a href="data-table.html" class="themes__item" data-sa-value="5"><img src="img/bg/5.jpg" alt=""></a>
        <a href="data-table.html" class="themes__item" data-sa-value="6"><img src="img/bg/6.jpg" alt=""></a>
        <a href="data-table.html" class="themes__item" data-sa-value="7"><img src="img/bg/7.jpg" alt=""></a>
        <a href="data-table.html" class="themes__item" data-sa-value="8"><img src="img/bg/8.jpg" alt=""></a>
        <a href="data-table.html" class="themes__item" data-sa-value="9"><img src="img/bg/9.jpg" alt=""></a>
        <a href="data-table.html" class="themes__item" data-sa-value="10"><img src="img/bg/10.jpg" alt=""></a>
    </div>
</div>

            <section class="content">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">用户管理</h4>
                        <h6 class="card-subtitle">在这里你可以很方便的进行用户管理...</h6>
                         <button type="button" class="btn btn-success" @click="add()">添加</button>
                        <div class="table-responsive">
                            <table id="data-table" class="table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>用户名称</th>
                                        <th>登录名</th>
                                        <th>手机</th>
                                        <th>电话</th>
                                        <th>性别 </th>
                                        <th>年龄</th>
                                        <th>邮箱</th>
                                         <th>部门名称</th>
                                          <th>角色名称</th>
                                          <th>公司名称</th>
                                          <!--<th>最后登录时间</th>-->
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(value, key, index) in neirong">
                                        <td>{{key+1}}</td>
                                        <td>{{ value.userName }}</td>
                                        <td>{{ value.loginName }}</td>
                                        <td>{{ value.cellphone }}</td>
                                        <td>{{ value.telephone }}</td>
                                        <td>{{ value.sex }}</td>
                                        <td>{{ value.age }}</td>
                                        <td>{{ value.email }}</td>
                                        <td>{{ value.groupName }}</td>
                                        <td>{{ value.roleName }}</td>
                                        <td>{{ value.companyName }}</td> 
                                                 <!--<td>{{ value.lastloginTime }}</td>-->
                                         <td>
                                        	<!--<button  type="button" class="btn btn-success" @click="handleUpdate(value)">修改</button>--> 
                                        	 &nbsp;<button type="button" class="btn btn-outline-danger" @click="handleDelete(value)">删除</button>
                                        </td>
                                    </tr>
                                    
                                    
                                   
                                </tbody>
                            </table>
                        </div>
                        <el-pagination
					  background
					  layout="prev, pager, next"
					   :current-page="currentPage"
					  :page-size="12"
					  :pager-count="11"
					  :total="parms"
					   @current-change="handleCurrentChange"
					  >
					</el-pagination>
                    </div>
                </div>
                
                          <!-- 添加或修改置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form"  label-width="120px">
       
       <el-form-item label="公司" prop="name">
            <el-select
              v-model="form.companyId"
              placeholder="公司"
              clearable
              @change="getcPersonId"
              style="width: 340px"
            >
              <el-option
                v-for="dict in roleOptions"
                :key="dict.id"
                :label="dict.name"
                :value="dict.id"
              />
            </el-select>
        </el-form-item>
        
        <el-form-item label="部门" prop="groupName"> 
        	
        	<el-select 
              v-model="form.groupId"
              placeholder="部门"
              clearable
              style="width: 340px"
            >
              <el-option
                v-for="dict in personOptions"
                :key="dict.id"
                :label="dict.groupName"
                :value="dict.id"
              />
            </el-select>
        	
            
        </el-form-item>
        
        <el-form-item label="角色" prop="roleId"> 
          <el-select 
              v-model="form.roleId"
              placeholder="角色"
              clearable
              style="width: 340px"
            >
              <el-option
                v-for="dict in cpersonOptions"
                :key="dict.id"
                :label="dict.roleName"
                :value="dict.id"
              />
            </el-select>
        </el-form-item>
       
       <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName" placeholder="用户名" />
        </el-form-item>
        
        <el-form-item label="登录名" prop="loginName">
          <el-input v-model="form.loginName" placeholder="登录名" />
        </el-form-item>
        
        <el-form-item label="密码" prop="loginPass">
          <el-input v-model="form.loginPass" placeholder="密码" />
        </el-form-item>
        
        <el-form-item label="手机" prop="cellphone">
          <el-input v-model="form.cellphone" placeholder="手机" />
        </el-form-item>
        
        <el-form-item label="电话" prop="telephone">
          <el-input v-model="form.telephone" placeholder="电话" />
        </el-form-item>
        
        <el-form-item label="性别 " prop="sex">
         <el-select
              v-model="form.sex"
              placeholder=" 性别"
              clearable
              style="width: 340px"
            >
              <el-option 
                v-for="dict in sex"
                :key="dict.lvalue"
                :label="dict.label"
                :value="dict.lvalue"
              />
            </el-select>
        </el-form-item>
         <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="邮箱" />
        </el-form-item>
        
 
        
     
  
     
    
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

                <!--<footer class="footer hidden-xs-down">
                    <p>© 郑州欧柯奇仪器制造有限公司.</p>

                    <ul class="nav footer__nav">
                        <a class="nav-link" href="#">Homepage</a>

                        <a class="nav-link" href="#">Company</a>

                        <a class="nav-link" href="#">Support</a>

                        <a class="nav-link" href="#">News</a>

                        <a class="nav-link" href="#">Contacts</a>
                    </ul>
                </footer>-->
            </section>
        </main>


        <!-- Javascript -->
        <!-- Vendors -->
        <script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
        <script src="vendors/bower_components/popper.js/dist/umd/popper.min.js"></script>
        <script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="vendors/bower_components/jquery.scrollbar/jquery.scrollbar.min.js"></script>
        <script src="vendors/bower_components/jquery-scrollLock/jquery-scrollLock.min.js"></script>

        <!-- Vendors: Data tables -->
        <script src="vendors/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
        <script src="vendors/bower_components/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
        <script src="vendors/bower_components/datatables.net-buttons/js/buttons.print.min.js"></script>
        <script src="vendors/bower_components/jszip/dist/jszip.min.js"></script>
        <script src="vendors/bower_components/datatables.net-buttons/js/buttons.html5.min.js"></script>

        <!-- App functions and actions -->
        <script src="js/app.min.js"></script>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
        <script src="../js/best.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        
        <script>
    new Vue({
	el: '#app',
	data:function() {
		return {
			userPhone:null,
			userName:null,
			ment:null,
			neirong:null,
			parms:null,
			loading: true,
			currentPage: 1,
	        pageSize: 30,
	        currentTotal: 0,
	             open: false,
	               title: "",
	               form:[],
	               rules:[],
	               roleOptions:[],
	               userIdOptions:[],
	               personOptions:[],
	               cpersonOptions:[],
	               sex:[
	               {
        lvalue: 0, 
          label: '男'
        }, {
          lvalue: 1,
          label: '女'
        }
	               ]
		}
	},
	mounted() {
		var this_=this;
		 ajaxTypec(basePath + '/company/selectCompanyList.do','get','',getur3l)
	       function getur3l(datac){
	       		console.log("99698")
	       	console.log(datac)
	        	this_.roleOptions = datac.data;
	       }
		
			//获取菜单
		axios(basePath + '/menu/findMenuList.do', {
			method: 'GET',
			mode: 'no-cors',
			headers: {
				'Access-Control-Allow-Origin': '*',
				'Content-Type': 'application/json',
			},
			withCredentials: true,
			credentials: 'same-origin',
		}).then(response => {
			if(response.data.state) {
				this.ment = response.data.data
				this.userPhone=getCookie('userPhone');
						this.userName=getCookie('userName');
					 var b = getCookie('themesitem');
		$("body").attr("data-sa-theme", b)
						
			} else {
				alert(res.data.msg)
				window.location.href = "../login/login.html"
			}

		}).catch(function(error) { // 请求失败处理
			console.log(error);
		});
			
			this.getchongqing();  //selectCompanyList
			
			
			
			
			
	
	},
	methods: {
		 handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.getchongqing()
			
	},
	currentPage(val){
		 console.log(val);
	},
	getcPersonId(){
    	this.form.userId=undefined;
    	this.getPersonId();
    	var this_ =this;
    	 ajaxTypec(basePath + '/role/findAllRole.do','post',this_.form,getur1cl)
	       function getur1cl(response){
	       	console.log(response)
	       return	this_.cpersonOptions = response.data;
	       }
    },
    getPersonId(){
    	var this_ =this;
    	ajaxTypec(basePath + '/group/findAllGroup.do','post',this_.form,getur1cl)
	       function getur1cl(response){
	       	console.log(response)
	       return	this_.personOptions = response.data;
	       }
	       
	      
    	
    },
	
		submitForm: function() {
      this.$refs["form"].validate(valid => {
         var this_id=this;
         if (valid) {
         	if (this_id.form.id != undefined) {
         		
         		var formr={
         			id:this.form.id,
         			groupName:this.form.groupName,
         			companyId:this.form.companyId,
         			remark:this.form.remark,
         			};
         		
         		ajaxTypec(basePath + '/user/editUser.do','post',formr,getur1l)
	       function getur1l(data){
	       	if(data.state){
	       		 		this_id.$message({
            type: 'success',
            message: '修改成功!'
          });
          this_id.getchongqing();
	       	}else{
	       	this_id.$message({
            type: 'success',
            message: data.msg
          });
	       	}
	     
                this_id.open = false;
         		
         	}	
         	}else{
         
         	console.log(this.form)
         	 ajaxTypec(basePath + '/user/saveUser.do','post',this_id.form,getur1l)
	       function getur1l(data){
	       	if(data.state){
	       		 	this_id.$message({
            type: 'success',
            message: '添加成功!'
          });
          this_id.getchongqing();
	       	}else{
	       		this_id.$message({
            type: 'success',
            message: data.msg
          });
	       		
	       	}
	     
                this_id.open = false;
	       	
	       		console.log("996")
	       	console.log(data)
	        		
         	}
	       }	
         }
         
      })
	},
	
	
	add(){
	  this.reset();
      this.open = true;
      this.title = "添加用户";
	},
	// 表单重置
    reset() {
      this.form = {
      };
    },
	cancel(){
		this.open = false;
      this.reset();
	},
	 // 表单重置
    reset() {
      this.form = {
        areaName:null, province:null, city:null, area:null, position:null, comCode:null,
        companyId:null, userId:null,groupId:null, roleId:null, userName:null, loginName:null,
        loginPass:null,  cellphone:null, telephone:null, sex:null, email:null,roleId:null, groupId:null,
      };
    },
	handleUpdate(row) {
		console.log(row)
		this.open = true;
		this.form = row;
	},
	/** 删除按钮操作 */
    handleDelete(row) {
    	var this_ca=this;
      const roleIds = row.id || this.ids;
      this.$confirm('是否确认删除设备编号为"' + roleIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
         var data2 = {
		        userId:row.id
	          };
	          var this_=this;
	      ajaxTypec(basePath + '/user/deleteUser.do','post',data2,geturl)
	       function geturl(data){
	       	console.log(data)
	       	
	       	if(data.state){
	       		
	       	
         
          
         } this_ca.getchongqing()
	       }
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
	
	
	
	
	
	
	
	
	getchongqing(val){
		 this.loading = true;
		axios(basePath + '/user/queryUserList.do', {
			method: 'GET',
			mode: 'no-cors',
			headers: {
				'Access-Control-Allow-Origin': '*',
				'Content-Type': 'application/json',
			},
			withCredentials: true,
			credentials: 'same-origin',
			params:{pageSize:12,
				pageIndex:this.currentPage
				
			}
		}).then(response => {
			if(response.data.state) {
				this.neirong = response.data.data
				this.parms = response.data.parms.totalCount
				this.loading = false;
				console.log(response);
			} else {
				alert(res.data.msg)
				window.location.href = "../login/"
			}

		}).catch(function(error) { // 请求失败处理
			console.log(error);
		});
	}
		
		
	}
})
        </script>

        
        
        
    </body>
</html>